<span class="accessibility-warning" tabindex="0"> Warning: for improved accessibility assigning students to groups, please use the Move To Dialog option found in the menu.</span>

<div class="group-category-summary">
  {{#if groupsAreSearchable}}
    <div class="group-category-summary__search">
      <input
        type="text"
        class="filterable search-query"
        placeholder="{{#t "search_groups"}}Search groups{{/t}}"
        aria-label="{{#t "search_groups"}}Search groups{{/t}}"
        role="search"
      >
    </div>
  {{/if}}
  <div class="group-category-summary__detail" data-view="groupCategoryDetail"></div>
</div>

<div class="group-category-contents {{#if ENV.IS_LARGE_ROSTER}}group-category-contents-condensed{{/if}}">
  {{#if randomlyAssignStudentsInProgress}}
    <div class="progress-container">
      <h5 class="progress-title">{{#t "randomly_assigning_students"}}Randomly Assigning Students{{/t}}</h5>
      <div class="progressbar ui-progressbar ui-widget ui-widget-content ui-corner-all" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="{{progress.completion}}">
          <div class="ui-progressbar-value ui-widget-header ui-corner-left" style="width: {{progress.completion}}%;"></div>
      </div>
    </div>
  {{else}}

    {{#if ENV.IS_LARGE_ROSTER}}
      <div class="groups" data-view="groups"></div>
    {{else}}

      <div class="row-fluid">
        <div class="span3 unassigned-students">
          <h2 class="unassigned-users-heading group-heading"></h2>
          <input
            type="search"
            class="ic-Input filterable-unassigned-users search-query"
            placeholder="{{#t "search_users"}}Search users{{/t}}"
            aria-label="{{#t "search_users"}}Search users{{/t}}"
          >
          <div data-view="unassignedUsers"></div>
        </div>
        <div class="span9 groups">
          <h2 class="group-heading groups-with-count"></h2>
          <div data-view="groups"></div>
        </div>
      </div>
    {{/if}}
  {{/if}}
</div>
